<template>
  <input type="text" name="" id="" v-model="keyWord">
  <h3>{{ keyWord }}</h3>
</template>

<script setup>  // customRef 的使用 自定义 ref
import { ref, customRef } from 'vue'
// let keyWord = ref('hello') // 使用 vue 提供的 ref
// let keyWord = customRef()  // 使用 customRef 自定义 ref
let keyWord = myRef('hello')
// 自定义一个 ref
function myRef(value) {
  console.log(value)
  let timer
  return customRef((track, trigger) => {
    return {
      get: function() {
        track() // 通知 vue 追踪 value的变化（提前通知 value 是有用的，需要修改）
        return value
      },
      set: function(newVal) { // newVal 为修改后的数据
        console.log(newVal)
        clearTimeout(timer)
        timer = setTimeout(() => { // 等 1s 在解析模板
          value = newVal
          trigger() // 通知 vue 重新解析模板
        }, 500)
      }
    }
  })
}
</script>

<style></style>